@use '../../../theme' as *;

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-container-darker);
}

.info {
  background: var(--color-bg-container);
  font-size: #{$font-size-l-g}px;
  display: flex;
  width: 80%;
  padding: #{$padding-l-g}px;
  border: 1px solid var(--color-border);
  border-radius: #{$border-radius-s-m}px;
  flex-direction: column;
  row-gap: #{$margin-m-d}px;
}

.row {
  display: flex;
  width: 100%;
  flex-direction: row;
  column-gap: #{$margin-x-l}px;
}

.item {
  width: 33.3%;
  flex: 1;
  overflow: hidden;
  [class^='icon-'],
  [class*=' icon-'] {
    &::before {
      position: relative;
      top: 2px;
    }
  }
  &:hover {
    .value {
      color: var(--color-primary);
    }
  }
}

.title,
.value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title {
  margin-bottom: #{$margin-x-x-s}px;
}
